<template>
	<nav-header>
		<template #name>每日推荐</template>
		<template #custom>
			<view class="custom">
				<uni-icons type="calendar" color="#28B389" size="18" ></uni-icons>
				<uni-dateformat :date="Date.now()" format="yy年MM月dd日" />
			</view>
		</template>
	</nav-header>
	<scroll-view class="pics" scroll-x>
		<view class="item" @click="navigateUrl(index)" v-for="(item, index) in randomList" :key="item._id">
			<image class="image" :src="item.smallPicurl" lazy-load mode="aspectFill"></image>
		</view>
	</scroll-view>
</template>

<script setup>
	import { onMounted, onUnmounted } from 'vue';
import {
		apiGetDayRandom
	} from '@/service/apis';

	const randomList = ref([])
	const getRandomPic = async () => {
		randomList.value = await apiGetDayRandom()
	}
	const navigateUrl = (index) => {
		uni.setStorageSync('classlist',randomList.value)
		uni.navigateTo({
			url: `/pages/classify/classlist/preview/preview?current=${index}`
		})
	}
	onMounted(() => {
		getRandomPic()
	})
	onUnmounted(()=>{
		uni.removeStorageSync('classlist')
	})
</script>

<style lang="scss" scoped>
	.custom {
		color: $primary-theme-color;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		:deep() {
			.uni-icons {
				color: $primary-theme-color !important;
			}
		}
	}

	.pics {
		white-space: nowrap;
		
		.item {
			width: 200rpx;
			height: 430rpx;
			display: inline-block;
			margin-right: 15rpx;
			border-radius: 10rpx;
			overflow: hidden;
			.image {
				width: 100%;
				height: 100%;
			}
			&:first-child {
				margin-left: 30rpx;
			}

			&:last-child {
				margin-right: 30rpx;
			}
		}
	}
</style>